<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <div ref="searchRef">
      <el-form
        class="-mb-15px"
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="110px"
      >
        <el-form-item label="工号" prop="jobNumber">
          <el-input
            v-model="queryParams.jobNumber"
            placeholder="请输入工号"
            clearable
            @keyup.enter="handleQuery"
            class="!w-220px"
          />
        </el-form-item>
        <el-form-item label="姓名" prop="staffName">
          <el-input
            v-model="queryParams.staffName"
            placeholder="请输入姓名"
            clearable
            @keyup.enter="handleQuery"
            class="!w-220px"
          />
        </el-form-item>
        <el-form-item label="所属部门" prop="configOrgDeptArchivesName">
          <el-input
            v-model="queryParams.configOrgDeptArchivesName"
            placeholder="请输入所属部门"
            clearable
            @keyup.enter="handleQuery"
            class="!w-220px"
          />
        </el-form-item>
        <el-form-item label="手机号" prop="mobile">
          <el-input
            v-model="queryParams.mobile"
            placeholder="请输入手机号"
            clearable
            @keyup.enter="handleQuery"
            class="!w-220px"
          />
        </el-form-item>
        <el-form-item label="所属班组" prop="teamName">
          <el-input
            v-model="queryParams.teamName"
            placeholder="请输入所属班组"
            clearable
            @keyup.enter="handleQuery"
            class="!w-220px"
          />
        </el-form-item>
        <el-form-item label="入职时间" prop="entryTime">
          <el-date-picker
            v-model="time"
            value-format="YYYY-MM-DD HH:mm:ss"
            type="daterange"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
            class="!w-220px"
          />
        </el-form-item>
        <el-form-item label="在职状态" prop="dictStaffStatus">
          <el-select
            v-model="queryParams.dictStaffStatus"
            placeholder="请选择在职状态"
            clearable
            class="!w-220px"
          >
            <el-option
              v-for="dict in getIntDictOptions('dict_staff_status')"
              :key="dict.value"
              :label="dict.label"
              :value="dict.value"
            />
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery">搜索</el-button>
          <el-button @click="resetQuery">重置</el-button>
        </el-form-item>
      </el-form>
    </div>
    
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap>
    <div class="btnWrap" ref="btnWrap">
      <div>
        <el-button
          type="primary"
          @click="handleUpload"
          :loading="uploadLoading"
          v-hasPermi="['config:org-staff-archives:upload']"
        >
          数据导入
        </el-button>
        <el-button
          type="primary"
          @click="handleExport"
          :loading="exportLoading"
          v-hasPermi="['config:org-staff-archives:export']"
        >
          数据导出
        </el-button>
        <el-button
          type="primary"
          @click="openForm('create')"
          v-hasPermi="['config:org-staff-archives:create']"
        >
          新增
        </el-button>
      </div>
      <div>
        <el-button
          type="primary"
          @click="openTableTitleSet"
        >
          表头设置
        </el-button>
      </div>
    </div>
    <Table
      :columns="tableTitleList"
      :selection="tableObject.tableList.length ? true : false"
      :data="tableObject.tableList"
      :loading="tableObject.loading"
      :pagination="{
        total: tableObject.total
      }"
      v-model:pageSize="tableObject.pageSize"
      v-model:currentPage="tableObject.currentPage"
      @register="register"
      border
      :tableHeight="tableHeight"
    >
      <template #action="{ row }">
        <el-button
          link
          type="primary"
          @click="openForm('update', row.id)"
          v-hasPermi="['config:org-staff-archives:update']"
        >
          编辑
        </el-button>
        <el-button
          link
          type="danger"
          :loading="deleteLoading"
          @click="handleDelete(row.id)"
          v-hasPermi="['config:org-staff-archives:delete']"
        >
          删除
        </el-button>
      </template>
    </Table>
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
  <OrgStaffArchivesForm ref="formRef" @success="getList" />
  <!-- 表头设置 -->
  <table-width-set ref="tableTitleSet" @refresh="getTableTitle" />
  <!-- 导出 -->
  <ExportFile ref="exportRef" @download="downloadFun" />
  <!-- 导入 -->
  <UploadForm ref="uploadFormRef" @success="getList" />
</template>

<script setup lang="ts" name="OrgStaffArchives">
  import { getIntDictOptions } from '@/utils/dict'
  import UploadForm from './upload.vue'
  import download from '@/utils/download'
  import * as OrgStaffArchivesApi from '@/api/config/orgPeopleArchives'
  import OrgStaffArchivesForm from './OrgStaffArchivesForm.vue'
  import type { CrudSchema } from '@/hooks/web/useCrudSchemas'
  const message = useMessage() // 消息弹窗
  const { t } = useI18n() // 国际化

  const queryParams = reactive({
    pageNo: 1,
    jobNumber: null,
    staffName: null,
    configOrgDeptArchivesName: undefined, //部门名称
    mobile: null, //手机
    teamName: undefined,
    entryTime: undefined,
    dictStaffStatus: undefined,  //在职状态
    beginTime: null,
    endTime: null
  })
  const time = ref([])  //入职时间
  const queryFormRef = ref() // 搜索的表单
  const exportLoading = ref(false) // 导出的加载中
  const uploadLoading = ref(false)  //导入加载
  const deleteLoading = ref(false)
  const searchRef = ref() //查询条件ref

  const tableTitleList = ref<CrudSchema[]>([]) // 表头列表
  const code = 'OrgStaffArchives'  //表头名
  const tableHeight = ref(0)

  // tableObject：表格的属性对象，可获得分页大小、条数等属性
  // tableMethods：表格的操作对象，可进行获得分页、删除记录等操作
  const { tableObject, tableMethods } = useTable({
    getListApi: OrgStaffArchivesApi.getOrgStaffArchivesPage, // 分页接口
    defaultParams: queryParams
  })

  const parentRef = ref()
  // 获取table组件
  const register = (parent: any) => {
    parentRef.value = parent
  }

  // 获得表格的各种操作
  const { getList, setSearchParams } = tableMethods

  // 获取表头
  const getTableTitle = async () => {
    const res = await OrgStaffArchivesApi.getOrgStaffArchivesPage(queryParams)
    res.labels.push({
      field: 'action',
      label: '操作',
      align: 'left',
      headerAlign: 'left',
      width: 110
    })
    const { allSchemas } = useCrudSchemas(res.labels)
    tableTitleList.value = allSchemas.tableColumns
  }

  // 打开表头设置
  const tableTitleSet = ref()
  const openTableTitleSet = () => {
    tableTitleSet.value.open(tableTitleList.value, code)
  }

  /** 搜索按钮操作 */
  const handleQuery = () => {
    queryParams.pageNo = 1
    queryParams.entryTime = JSON.parse(JSON.stringify(time.value)).join(',')
    setSearchParams(queryParams)
  }

  /** 重置按钮操作 */
  const resetQuery = () => {
    queryFormRef.value.resetFields()
    time.value = []
    handleQuery()
  }

  /** 添加/修改操作 */
  const formRef = ref()
  const openForm = (type: string, id?: number) => {
    formRef.value.open(type, id)
  }

  /** 删除按钮操作 */
  const handleDelete = async (id: number) => {
    deleteLoading.value = true
    try {
      // 删除的二次确认
      await message.delConfirm()
      // 发起删除
      await OrgStaffArchivesApi.deleteOrgStaffArchives(id)
      message.success(t('common.delSuccess'))
      // 刷新列表
      await getList()
    } finally {
      deleteLoading.value = false
    }
  }

  /** 导出按钮操作 */
  const exportRef = ref()
  const handleExport = () => {
    exportRef.value.open()
  }

  // 导入
  const uploadFormRef = ref()
  const handleUpload = () => {
    uploadFormRef.value.open()
  }

  // 下载
  const downloadFun = async () => {
    const val = exportRef.value.params
    let params = {
      fileName: val.name,
      ids: []
    }
    if (val.range === 'all') {
      params.ids = []
    } else {
      params.ids = parentRef.value.selections.map((item) => {
        return item['id']
      })
    }
    const data = await OrgStaffArchivesApi.exportOrgStaffArchives(params)
    download.excel(data, val.name)
    parentRef.value.clearTableSelect()
  }

  /** 初始化 **/
  onMounted(async () => {
    const queryParamsHeight = queryFormRef.value.$el.clientHeight + 2
    tableHeight.value = document.body.clientHeight - 132 - queryParamsHeight - 115
    await getTableTitle()
    getList()
  })
</script>
<style lang="scss" scoped>
.btnWrap {
  display: flex;
  justify-content: space-between;
  margin-bottom: 10px;
}

:deep(.el-select .el-input) {
  width: 100%;
}
</style>